<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{margin:0;padding:0;}
    a{color:#000;text-decoration: none;}
    ul{
        padding-left:15px;
        padding-top:50px;
    }
    li{
        display:flex;
        line-height:60px;
        height:60px;
        align-items: center;
    }
    li img{
        width:40px;height:40px;border-radius:20px;
    }
    li span{
        margin-left:20px;
    }
    button{
        width:60px;height:60px;text-align: center;line-height: 60px;
        font-size: 50px;background-color: lightgreen;color:#fff;
        border-radius: 30px;border:0;
        position: fixed;right:30px;bottom:30px;
    }

    .marsk-box{
        width:100vw;height:100vh;
        background-color: rgba(0,0,0,.2);
        position: absolute;
        left:0;top:0;
        display:none;
    }

    .menu-box{
        background-color: #fff;
        border:1px solid #000;
        border-radius: 15px;
        padding:20px 40px;
        position:absolute;
        top:200px;
        border:0;
        font-weight: bold;
        font-size: 18px;
        display:none;
    }

    .menu-box .item{
        height:50px;line-height:50px;
    }

</style>
<body>
    <ul>
        <!-- <li>
            <img src="./imgs/1.jpg" />
            <span>张晓晓</span>
        </li> -->
    </ul>
    <a href="./add.html">
        <button>+</button>
    </a>

    <div class="marsk-box"></div>

    <!-- 添加弹窗 -->
    <div class="menu-box">
        <div class="item" onclick="del()">删除</div>
        <div class="item">添加收藏</div>
    </div>

</body>
</html>
<script>
    // 放一段假数据进去
    // localStorage.setItem("userList",[
    //     {name:"老王",tel:"13838384567",avator:"./imgs/1.jpg"},
    //     {name:"小张",tel:"13877778888",avator:"./imgs/2.jpg"},
    //     {name:"小红",tel:"13523234455",avator:"./imgs/3.jpg"},
    //     {name:"晶晶",tel:"17655669988",avator:"./imgs/4.jpg"},
    //     {name:"珍珍",tel:"18888888888",avator:"./imgs/5.jpg"},
    // ])

    // 当第一次进入页面，设置一些初始值
    let initValue = ()=>{
        let rs = localStorage.getItem("userList");
        if(! rs){
              //localStorage只能放字符串
                //将想要放进去的数组或者对象，先转成字符串，然后在放进去
                localStorage.setItem("userList",JSON.stringify([
                    {name:"老王",tel:"13838384567",avator:"./imgs/1.jpg"},
                    {name:"小张",tel:"13877778888",avator:"./imgs/2.jpg"},
                    {name:"小红",tel:"13523234455",avator:"./imgs/3.jpg"},
                    {name:"晶晶",tel:"17655669988",avator:"./imgs/4.jpg"},
                    {name:"珍珍",tel:"18888888888",avator:"./imgs/5.jpg"},
                ]))
        }

    }
    initValue();

  

    //当start的时候，我们就启动一个定时器，比如500ms
    //如果500ms之内，这个定时器没有被清除，500ms后，就执行长按事件的逻辑代码

    //当500ms内，执行了move或者end，都说明不是长按，我们就清除定时器。

    // 拿到menubox
    let oMaskBox = document.querySelector(".marsk-box");
    let oMenuBox = document.querySelector(".menu-box");
    let index = -1;


    let obj = null;

    let tstart = (event,ix)=>{
        obj = setTimeout(function(){
            // console.log("如果这里执行了，说明是长按")
            oMaskBox.style.display = "block";
            oMenuBox.style.display = "block";

            // 得到当前点击的位置
          
            console.log(event)
            let posX = event.touches[0].pageX;
            let posY = event.touches[0].pageY;
            
            //鼠标点击的位置，控制弹窗，从鼠标的位置，往左移动50px 往上移动50px 

            oMenuBox.style.top = (posY -20) + "px";
            oMenuBox.style.left = (posX- 20) + "px";

            index = ix;

            // event.preventDefault();

        },500)
    }

    let tmove = ()=>{
        clearTimeout(obj);
        obj = null;
    }

    let tend = ()=>{
        clearTimeout(obj);
        obj = null;
    }

    //一进入这个页面，就需要获取到用户列表数据，渲染到页面上
   let renderList = ()=>{
        let xx = localStorage.getItem("userList");
        xx = JSON.parse(xx);
        let oUl = document.querySelector("ul");
        let str = xx.map((item,index)=>{
            return `
                <li onTouchStart="tstart(event,${index})" onTouchEnd="tend()" onTouchMove="tmove()">
                    <img src="${item.avator}" />
                    <a href="tel:${item.tel}">
                        <span>${item.name}</span>
                    </a>
                </li>
            `;
        })
        str = str.join("");
        oUl.innerHTML = str;
   }

    renderList();

    let del = ()=>{
        //删除谁呢？
        //要删除长按的那条数据
        let xx = localStorage.getItem("userList");
        xx = JSON.parse(xx);
        xx.splice(index,1);
        xx = JSON.stringify(xx);
        localStorage.setItem("userList",xx);
        //重新渲染数据
        renderList();

        oMaskBox.style.display = "none";
        oMenuBox.style.display = "none";
        index = -1;
    }

</script>